<template>
  <div class="page">
    <!--订单详情-->
    <el-card class="card">
      <div class="card-title">订单详情</div>
      <el-divider></el-divider>
      <table class="card-content">
        <tr class="tr" v-for="(item,index) in details">
          <td class="td" v-for="i in item" style="width:33.33%">
            <div class="content-item">
              <div class="item-label"><div class="label-text">{{ i.label }}</div></div>
              <div class="item-data">
                <div>
                  <div class="data-text">{{ i.data }}</div>
                </div>
              </div>
            </div>
          </td>
        </tr>
        <tr class="last-tr">
          <td colspan="3">
            <div class="last-item">
              <div class="last-label"><div class="last-text">订单备注</div></div>
              <div class="last-data">需要全新的布料</div>
            </div>
          </td>
        </tr>
      </table>
    </el-card>

    <!--费用信息-->
    <el-card class="card">
      <div class="card-title">费用信息</div>
      <el-divider></el-divider>
      <table class="card-content">
        <tr class="tr" v-for="(item,index) in costInfo">
          <td class="td" v-for="i in item" style="width:33.33%">
            <div class="content-item">
              <div class="item-label"><div class="label-text">{{ i.label }}</div></div>
              <div class="item-data">
                <div>{{ i.data }}</div>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </el-card>

    <!--备注-->
    <el-card class="card">
      <div class="card-title">
        <div class="left">备注</div>
        <div class="right">
          <el-button type="success" @click="editNote">编辑</el-button>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="note">
        {{ note }}
      </div>
    </el-card>

    <!--编辑备注弹框-->
    <remark @close="closeEditNote" :id="id" :is-remark="isRemark"></remark>
  </div>
</template>

<script>
import Remark from '@/framework/components/dialog/live/playback/show/remark'

export default {
  name: "show",
  data(){
    return{
      id:'',
      //直播回放详情
      details:[
        [
          {label:"订单类型",data:'直播订单'},
          {label:"下单时间",data:'2022-01-12 13:12'},
          {label:"收货人姓名",data:'张三'}
        ],
        [
          {label:"订单状态",data:'已完成'},
          {label:"支付时间",data:'2022-01-12 13:13'},
          {label:"收货人手机号",data:'15263254125'}
        ],
        [
          {label:"订单号",data:'652325412541'},
          {label:"发货时间",data:'2022-01-13 13:00'},
          {label:"收货人地址",data:'广州市天河区科韵路地铁站'}
        ],
        [
          {label:"支付流水号",data:'632542154125'},
          {label:"收货时间",data:'2022-01-15 13:00'},
          {label:"支付方式",data:'微信'}],
        [
          {label:"商品数量",data:'2'},
          {label:"所属店铺",data:'解忧杂货铺'},
          {label:"来源",data:'纺织直播'}
        ],
      ],
      //费用信息
      costInfo:[
        [
          {label:"订单金额",data:'￥100.00'},
          {label:"优惠金额",data:'-￥10.00'},
          {label:"需付金额",data:'￥90.00'}
        ],
        [
          {label:"实付金额",data:'￥90.00'},
          {},
          {}
        ],
      ],
      isRemark: false,//编辑备注
      note:'电商直播服务商，集营销，引流，销售于一体，帮助电商快速开播，内嵌商城，加速购买决策，红包，拼团，秒杀等功能引爆直播气氛，小程序观看下单，流量沉淀无外流，打造专属私域流量池。电商直播服务商，集营销，引流，销售于一体，帮助电商快速开播，内嵌商城，加速购买决策，红包，拼团，秒杀等功能引爆直播气氛，小程序观看下单，流量沉淀无外流，打造专属私域流量池。',//备注内容
    }
  },
  components: { Remark },
  mounted() {
    this.id = this.$route.params.id
    console.log(this.id)
    //通过id请求数据
    // get({id: this.$route.params.id}, res=> {
    //   this.showInfo = res
    // })
  },
  methods:{
    //编辑备注
    editNote(){
      this.isRemark = true
    },

    //关闭编辑备注
    closeEditNote(isRemark){
      this.isRemark = isRemark
    },

  }
}
</script>

<style lang="less" scoped>
.page{
  width:100%;

  .card {
    margin-bottom: 25px;

    .card-title{
      display: flex;
      width: 100%;
      align-items: center;

      .right{
        flex:1;
        display: flex;
        justify-content: right;
      }
    }

    .card-content{
      width: 100%;
      border:1px solid #ededed;
      border-collapse:collapse;

      .last-item{
        display: flex;
        min-height:80px;
        overflow: hidden;
      }

      .last-label{
        width: 120px;
        border-right: 1px solid #ededed;
        background-color: #f2f2f2;
        min-heigth: 80px;
        text-align: center;
      }

      .last-text{
        height:100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .last-data{
        flex:1;
        padding: 10px;
        display: flex;
        align-items: center;

        .data-text{
          width:100%;
        }
      }

      tr:last-child{
        min-height:80px;
      }

      .tr{
        min-height:80px;

        .td{
          border:1px solid #ededed;
          min-height: 80px;
          overflow: hidden;

          .content-item{
            display: flex;
            //align-items: center;
            min-height:80px;

            .item-label{
              //width: 120px;
              //border-right: 1px solid #ededed;
              //background-color: #f2f2f2;
              //min-heigth:80px;
              width: 120px;
              border-right: 1px solid #ededed;
              background-color: #f2f2f2;
              min-heigth: 80px;
              text-align: center;
            }

            .label-text{
              //height: 80px;
              //display: flex;
              //justify-content: center;
              //align-items: center;
              height:100%;
              display: flex;
              justify-content: center;
              align-items: center;
            }

            .item-data{
              //flex:1;
              //padding:10px;
              //display: flex;
              //align-items: center;
              padding: 10px;
              min-height:80px;
              display: flex;
              align-items: center;
              //justify-content: center;
              flex:1;

              .data-text{
                width:100%;
                //background-color: red;
              }

              .click{
                color: rgb(0,0,238);
                text-decoration:underline;
                cursor:pointer;
              }

              .click:focus{
                color: rgb(85,26,139);
              }

              img{
                width: 75px;
                height: 75px;
              }
            }
          }
        }
      }
    }

    .pager-group{
      width:100%;
      margin: 20px 0;
    }

    .note{
      line-height: 25px;
    }
  }
}
</style>
